// 封装toast提示
import "./showToast.css";

class ShowToast {
    info(text) {
        this.showToast(text, "info");
    }

    success(text) {
        this.showToast(text, "success");
    }

    fail(text) {
        this.showToast(text, "fail");
    }

    /**
     * @text 提示文案
     * @status 默认/成功/失败状态
     */
    showToast(text, status) {
        var transitionTime = 200; // toast消失用时200ms
        var existTime = 1500; // 一条toast存在的时间，1500ms后自动消失
        var totalTime = transitionTime + existTime; // 所有操作都结束的时间
        // toast提示的外层盒子
        var wrap = document.querySelector("#toast__wrap");
        // 如果外层盒子不存在，就创建一个新的外层盒子
        if (!wrap) {
            var _wrap = document.createElement("div");
            _wrap.setAttribute("id", "toast__wrap");
            document.body.appendChild(_wrap);
            wrap = document.querySelector("#toast__wrap");
        }
        // 创建toast盒子
        var _div = document.createElement("div");
        _div.setAttribute("class", `toast ${status}`);
        wrap.appendChild(_div);
        _div.innerHTML = text;
        var toasts = document.querySelectorAll(".toast");
        // 如果toast同时存在两条，那么最初的那条，要去掉
        if (toasts.length === 2) {
            toasts[0].classList.add("toast-move");
            var outTimer = null;
            // toast提示执行transition动画后，就删除
            outTimer = setTimeout(function () {
                toasts[0].remove();
                clearTimeout(outTimer);
            }, transitionTime);
        } else if (toasts.length > 2) {
            // 如果快速点击，导致同时存在的toast提示有很多，那么就把旧的toast都删除
            // 目的是永远只保留最新的那一条toast提示
            toasts[0].remove();
            toasts[1].remove();
        }
        var timer1 = null;
        var timer2 = null;
        // 一条toast提示最多存在1500ms，
        // 在没有任何操作的情况下，1500ms后toast会自动开始消失
        timer1 = setTimeout(function () {
            toasts[toasts.length - 1].classList.add("toast-move");
            clearTimeout(timer1);
        }, existTime);
        // 等到所有动画和操作都结束了，检查当前还有没有toast提示存在
        // 如果有，就删除，如果没有，连外层盒子也跟着删除
        // 同时，把变量都设为null，防止内存泄漏
        timer2 = setTimeout(function () {
            toasts[toasts.length - 1].remove();
            wrap.childNodes.length === 0 && wrap.remove();
            clearTimeout(timer2);
            wrap = null;
            toasts = null;
        }, totalTime);
    }
}

export default new ShowToast();
